<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>
        <h1>线性表：</h1>
        <label for="name">姓名：<input type="text" id="name" placeholder="请输入姓名" /></label>
        <label for="age">年龄：<input type="number" id="age" placeholder="请输入年龄" /></label>
        <label for="index">索引：<input type="number" id="index" placeholder="索引(从0开始)" /></label>

        <input type="button" value="插入" id="insert">
        <input type="button" value="获取" id="get">
        <input type="button" value="删除" id="del">
        <input type="button" value="查看当前list" id="current">
    </div>
    <div>
        <h1>展示：</h1>
        <div id="result"></div>
    </div>

    <script>
        window.onload = function() {
            function $$(id) {
                return document.querySelector(`#${id}`);
            }

            // 定义单链表结点
            function LinkNode(data, next){
                this.data = data; // 数据域
                this.next = next; // 指针域
            }

            // 单链表初始化
            function createLink() {
                const list = new LinkNode(0, null);
                return list;
            }

            let list = createLink(),
                insertBtn = $$('insert'),
                getBtn = $$('get'),
                delBtn = $$('del'),
                currentBtn = $$('current'),
                result = $$('result');

            /**
            * 单链表插入数据
            * @param {array} list
            * @param {number} index
            * @param {object} data
            */
            function insertItem(list, index, data) {
                let obj = list;
                let k = 1;
                while(obj && index < k) {
                    ++k;
                    obj = obj.next;
                }
                if(!obj || k > index) {
                    alert('插入位置不正确');
                    return;
                }
                const sNode = new LinkNode(data, obj.next);
                obj.next = sNode;
                list.data += 1;
                result.innerHTML = `${result.innerHTML}<br />从索引${index}处插入一个元素<br />${JSON.stringify(list)}`
            }
            /**
            * 获取数据
            * @param {array} list
            * @param {number} index
            */
            function getItem(list, index) {
                let j = 1;
                let obj = list.next;
                while (obj && j < index) {
                    ++j;
                    obj = obj.next;
                }
                if(!obj || j > index) {
                    alert('元素不存在');
                    return;
                }
                result.innerHTML = `${result.innerHTML}<br />获取索引为 ${index} 的元素：<br />${JSON.stringify(obj)}`;
            }
            /**
            * 删除数据
            * @param {array} list
            * @param {number} index
            */
            function delItem(list, index) {
                let j = 1;
                let obj = list;
                while(obj.next && j < index) {
                    ++j;
                    obj = obj.next;
                }
                if(!(obj.next) || j > index) {
                    alert('非法的删除位置');
                    return;
                }
                let item = obj.next;
                obj.next = item.next;
                list.data -= 1;
                item = null;
                result.innerHTML = `${result.innerHTML}<br />删除索引为 ${index} 的元素：<br />${JSON.stringify(list)}`;
            }

            // 点击插入
            insertBtn.addEventListener('click', () => {
                const name = $$('name').value;
                const age = $$('age').value;
                const index = parseInt($$('index').value, 10) || 0;
                if(!name || !age) {
                    alert('请补全输入框');
                    return;
                }
                insertItem(list, index, {name, age});
            })
            // 点击获取
            getBtn.addEventListener('click', () => {
                const index = parseInt($$('index').value, 10);
                if(index === '') {
                    alert('请输入索引');
                    return;
                }
                getItem(list, parseInt(index, 10));
            })
            // 点击删除
            delBtn.addEventListener('click', () => {
                const index = parseInt($$('index').value, 10);
                if(index === '') {
                    alert('请输入索引');
                    return;
                }
                delItem(list, parseInt(index, 10));
            })
            // 查看当前
            currentBtn.addEventListener('click', () => {
                result.innerHTML = `${result.innerHTML}<br />当前 list 为：<br />${JSON.stringify(list)}`;
            })

        }
    </script>
</body>

</html>